<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <script type="text/javascript" src="webjars/jquery/1.11.1/jquery.js" ></script>
    <script type="text/javascript" src="webjars/jquery-atmosphere/2.2.3/jquery.atmosphere.js" ></script>
    <script type="text/javascript" src="resources/js/Math.uuid.js" ></script>
    <script type="text/javascript" src="resources/js/json2-min.js" ></script>
    <script type="text/javascript" src="resources/js/webrtc.js" ></script>
    <link rel="stylesheet" type="text/css" href="resources/css/videochat.css">
</head>
<body>
<div id="local">
    <video autoplay="autoplay"> </video>
</div>
<div id="remote" data-session="">
    <div id="empty_1" ><p>RemoteUser</p></div>
    <div id="empty_2" ><p>RemoteUser</p></div>
    <div id="empty_3" ><p>RemoteUser</p></div>
    <div id="empty_4" ><p>RemoteUser</p></div>
</div>
<div id="principal"></div>
<div id="controls">
    <a id="disconnect" href="#">disconnect</a>
    <a id="mute" href="#">mute</a>
    <a id="unmute" href="#">unmute</a>
    <a id="freeze" href="#">freeze</a>
    <a id="unfreeze" href="#">unfreeze</a>
</div>
<div id="chat">
    <div id="history"></div>
    <div id="input">
        <input id="chat" type="text" />
        <a id="chat" href="#">send</a>
    </div>
</div>

<script type="text/javascript">
    /*           */
    jQuery(function() {
        initVideoChat('pubsub/channels/');
    });
    /*     */
</script>
</body>
</html>